Video trimming UI plugin #1798

DanielHuntleySBG · 2020-04-24T14:32:13Z

Link to related issue (if applicable)

1743

Summary of proposed changes

Introduction of a video trimming tool into the libary. The tool is useful when creating clips or repeating loops.

Workflow

The trimming tool can be toggled via the enterTrim/exitTrim event or using the control in the controls bar.
Users can then drag the start and end point of the region to define the clipping region.
Doing so fires the trimChange event outputting the start and end points of the region.
From here the defined bounds of the clipping region can be used to create a clip (which will need to be done by the user)

Covered edge cases:

The user cannot define the trimming region outside of the bounds of the timeline.
The start or end time cannot be before one another

Thanks for taking the time to review these proposed changes and welcome any feedback or changes, thanks!

Checklist

Use develop as the base branch
Exclude the gulp build (/dist changes) from the PR
Test on supported browsers

… outside of the trimming region and set to the start of the trimming region

…g the trimming length (let go of trimming handle)

…y the seek position in the video | Trim plugin is also brought to be more inline with the existing code base (sass structure and change of this.tool to be this.elements)

… tool

…plyr into video-trimming-plugin

…was not created | We should only display the trim thumb time tooltip when displaying preview thumbnails as a seek tooltip is displayed

…in the correct format and pass a valid element

…s existed causing issues

…s showing only a very small region

…t and end points of the trimming range

…tting the trim length | Prevent the end value of the trimming region from being before the start

…sed via the trimming object and update documentation

…om the trim class: unsure whether a setter should exist for both of these and what its naming convention would be, so have kept it set via the variables directly

… so have moved the logic to inside the enter and exit function | Additionally removed toggling trimming from plyr.js as it can all be set via trim.xxx

…time

tomByrer · 2020-04-28T15:06:03Z

Interesting idea! Does it use Chapters?

http://thenewcode.com/977/Create-Interactive-HTML5-Video-with-WebVTT-Chapters

http://html5videoguide.net/demos/google_io/3_navigation/#videoBox

DanielHuntleySBG · 2020-04-30T08:05:58Z

Interesting idea! Does it use Chapters?

http://thenewcode.com/977/Create-Interactive-HTML5-Video-with-WebVTT-Chapters

http://html5videoguide.net/demos/google_io/3_navigation/#videoBox

It doesn't at the moment but that would be a good accessbilility enhancement!

tomByrer · 2020-05-03T19:15:20Z

"Chapters" is for more than accessibility; some tools use that markup..

Thiryn · 2020-07-21T10:45:45Z

Chapters are a good idea but perhaps not part of his work, this is allowing to make a 'sub-timeline', I like the idea and looks good. @sampotts any plan to bring this in?

jackguoAtJogg · 2020-07-29T16:44:32Z

@DanielHuntleySBG Do you have documentation how to use it? I would like to try it out since I have a project that needs a trimmer like this.

jackguoAtJogg · 2020-07-29T17:48:03Z

@sampotts Do we a timeline that when will this get merged?

DanielHuntleySBG · 2020-07-30T08:46:31Z

@jackguoAtJogg I have added documentation in the readme file outlining listeners and methods, hope it helps

jackguoAtJogg · 2020-07-30T19:42:16Z

@DanielHuntleySBG I see it in the README, I'll play around with it! Thank you making this amazing UI plugin! 🙇

adeeb1 · 2020-09-26T18:12:25Z

@DanielHuntleySBG I would love to use this. Would it be possible to resolve conflicts and update the branch please?

DanielHuntleySBG · 2020-10-02T09:47:07Z

@adeeb1 Hello, I would be happy to resolve the merge conflicts but am still waiting to hear whether it will be merged into the main repo 😄

adeeb1 · 2020-10-05T06:54:02Z

@DanielHuntleySBG If it's not too much work, this would be valuable to me (and possibly others) even if it's not merged into the official repo. I'm already using a fork with Dailymotion support (credit) and could include this in it. Otherwise, I may be able to update this.

sampotts · 2020-11-16T01:03:54Z

Could you fix the conflict on this? Then we could look at merging it in.

DanielHuntleySBG · 2020-11-16T13:05:36Z

@sampotts Should be resolved, let me know if you have any issues

sampotts · 2020-12-20T09:44:14Z

Thanks! Will take a look.

jackguoAtJogg · 2021-05-12T19:59:35Z

@DanielHuntleySBG I believe there's a typescript bug in plyr.d.ts line 834 where the duration type is missing.

interface SyncPoint {
    id: string;
    time: number;
    start: number;
    duration: duration;
  }

dy · 2021-06-17T15:02:30Z

Any chance it will be merged? Missing this feature in coming project, youtube clips is also in early alpha. What help can I provide?

Danielh112 and others added 23 commits April 2, 2020 14:28

Structural code for video trimming UI

ba312b2

Merge remote-tracking branch 'origin/develop' into video-trimming-plugin

72f1568

Trim tool icons added

4c75bcc

If the user is using the trimming tool, check if the seek position is…

c82fa73

… outside of the trimming region and set to the start of the trimming region

Improved styling of Trimming timeline

f5bc729

Fix to only update the current time when the user has finished settin…

13d15b6

…g the trimming length (let go of trimming handle)

Trimming tool: Implementation of timestamp above each thumb to displa…

ef5bccf

…y the seek position in the video | Trim plugin is also brought to be more inline with the existing code base (sass structure and change of this.tool to be this.elements)

Improve accessiblity: Inclusion of aria metadata

d8ae6e2

Nit pick fixes for trimming tool PR

c9f8329

Remove plyr.svg from pull request

5780e0d

Trimming: On source change update whether or not to show the trimming…

e13be14

… tool

Merge branch 'video-trimming-plugin' of https://github.com/SBGSports/…

5bb96f3

…plyr into video-trimming-plugin

Video trimming bug fix: When switching sources a new trimming object …

2ab8a88

…was not created | We should only display the trim thumb time tooltip when displaying preview thumbnails as a seek tooltip is displayed

Trimming: Change structure of triggerevent messages so that they are …

c0fa6d5

…in the correct format and pass a valid element

Remove Timeupdate event listener when changing source as two instance…

81d77eb

…s existed causing issues

Convert the default trim length to percent as for longer videos it wa…

ee73dc4

…s showing only a very small region

Addition of a couple additional api endpoints to get and set the star…

5e53137

…t and end points of the trimming range

Update to use the existing clamp function | Improve commenting for se…

83ab236

…tting the trim length | Prevent the end value of the trimming region from being before the start

Remove getter and setter for trimming from plyr.js as it can be acces…

bc2fbc4

…sed via the trimming object and update documentation

Remove settrimstart and settrimend from plyr.js as they can be set fr…

bdf4718

…om the trim class: unsure whether a setter should exist for both of these and what its naming convention would be, so have kept it set via the variables directly

Calling trim.enter or trim.exit did not update the video trim control…

04941a0

… so have moved the logic to inside the enter and exit function | Additionally removed toggling trimming from plyr.js as it can all be set via trim.xxx

Fix to Trimming tool, to prevent the start time being before the end …

64dc1fd

…time

Merge develop branch back into video trimming branch

6f06907

resolve merge conflicts

3aed88e

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Video trimming UI plugin #1798

Video trimming UI plugin #1798

DanielHuntleySBG commented Apr 24, 2020

tomByrer commented Apr 28, 2020

DanielHuntleySBG commented Apr 30, 2020

tomByrer commented May 3, 2020

Thiryn commented Jul 21, 2020

jackguoAtJogg commented Jul 29, 2020

jackguoAtJogg commented Jul 29, 2020

DanielHuntleySBG commented Jul 30, 2020

jackguoAtJogg commented Jul 30, 2020

adeeb1 commented Sep 26, 2020

DanielHuntleySBG commented Oct 2, 2020

adeeb1 commented Oct 5, 2020 •

edited

Loading

sampotts commented Nov 16, 2020

DanielHuntleySBG commented Nov 16, 2020

sampotts commented Dec 20, 2020

jackguoAtJogg commented May 12, 2021 •

edited

Loading

dy commented Jun 17, 2021

Video trimming UI plugin #1798

Are you sure you want to change the base?

Video trimming UI plugin #1798

Conversation

DanielHuntleySBG commented Apr 24, 2020

Link to related issue (if applicable)

Summary of proposed changes

Checklist

tomByrer commented Apr 28, 2020

DanielHuntleySBG commented Apr 30, 2020

tomByrer commented May 3, 2020

Thiryn commented Jul 21, 2020

jackguoAtJogg commented Jul 29, 2020

jackguoAtJogg commented Jul 29, 2020

DanielHuntleySBG commented Jul 30, 2020

jackguoAtJogg commented Jul 30, 2020

adeeb1 commented Sep 26, 2020

DanielHuntleySBG commented Oct 2, 2020

adeeb1 commented Oct 5, 2020 • edited Loading

sampotts commented Nov 16, 2020

DanielHuntleySBG commented Nov 16, 2020

sampotts commented Dec 20, 2020

jackguoAtJogg commented May 12, 2021 • edited Loading

dy commented Jun 17, 2021

adeeb1 commented Oct 5, 2020 •

edited

Loading

jackguoAtJogg commented May 12, 2021 •

edited

Loading